<template>
  <div>
    <v-alert type="info">布局系统可以将重复的页面或者组件布局重复利用</v-alert>
    <div class="c-layouts">
      <v-card class="mx-auto" variant="outlined">
        <v-card-item>
          <div style="padding: 10px; width: 700px; height: 680px">
            <div class="text-overline mb-1">基本布局</div>
            <NuxtLayout name="cain">
              <template #Navigation> 侧边栏 </template>
              <template #AppBar> 顶部 </template>
              <template #Main> 主体内容 </template>
              <template #Footer> 底部 </template>
            </NuxtLayout>
          </div>
        </v-card-item>
      </v-card>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss">
.c-layouts {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}
</style>
